<template>
  <view class="container">
    <view class="order-detail">
      <view class="head">
        <view class="left">
          订单详情
        </view>
      </view>
      <view class="middle">
        <image
          class="left"
          :src="orderDetail.productImage"
          mode="aspectFill"
        />
        <view class="center">
          <view class="title">
            <p class="font-14 color-333 font-weight-500">
              {{ orderDetail.productName || '' }}
            </p>
            <p class="font-13 color-555">
              ￥{{ orderDetail.price || '' }}
            </p>
          </view>
          <view class="title">
            <p class="font-12 color-999">
              出发日期：{{ orderDetail.touristDate || '' }}
            </p>
            <p class="font-12 color-999">
              X {{ orderDetail.buyNumber || '' }}
            </p>
          </view>
          <view class="price color-333 font-weight-500 font-12">
            实付总额 ￥ {{ orderDetail.realAmount || '0' }}
          </view>
        </view>
      </view>
    </view>
    <view class="refund-infor">
      <view class="head font-weight-500 color-555 font-15">
        退款信息
      </view>
      <view class="content">
        <view class="item">
          <view class="label">
            退款原因
          </view>
          <view
            class="infor color-999 font-14"
            @click="selectRefund"
          >
            {{ form.reason || '请选择退款原因' }} >
          </view>
        </view>
        <view class="item">
          <view class="label">
            退款金额
          </view>
          <view class="price font-weight-500 font-14">
            ¥{{ orderDetail.realAmount || '0' }}
          </view>
        </view>
        <view class="des font-11">
          (退还现金{{ orderDetail.realAmount || '0' }}元
          <text v-if="orderDetail.couponNumber">
            ，退还快乐券{{ orderDetail.couponNumber || '0' }}张
          </text>
          )
        </view>
        <view class="item font-11 color-999">
          退款方式：1～7个工作日内原路退回
        </view>
      </view>
    </view>
    <view class="refund-voucher">
      <view class="head font-weight-500 color-555 font-15">
        退款信息
      </view>
      <view class="refund-voucher-img">
        <upload-image
          :image-list="form.checksums"
          :length="6"
					tips="请上传凭证(最多6张)"
          @remove="removeList"
          @addImage="addImgList"
        />
      </view>
      <textarea
        class="refund-voucher-txt"
        maxlength="200"
        placeholder="请输入退款原因"
        :value="form.textInfo"
      />
    </view>
    <view class="foot">
      <button
        class="btn"
        :loading="btnLoading"
        :disabled="btnLoading"
        @click="submitOrder"
      >
        提交
      </button>
    </view>
    <popup-layer
      ref="popupRef"
      :direction="'top'"
      :show-pop="showRefundInfor"
      @closeCallBack="closePop"
    >
      <view class="refund-box">
        <view class="title color-333 font-16 font-weight-600">
          退款原因
        </view>
        <view class="list">
          <radio-group @change="radioChange">
            <label
              v-for="(item, index) in items"
              :key="item.value"
              class="list-cell"
            >
              <view>
                <radio
                  :value="item.value"
                  style="transform: scale(0.7)"
                  color="fe7d15"
                  :checked="index === current"
                />
              </view>
              <view style="padding-borrom: 5rpx">{{ item.name }}</view>
            </label>
          </radio-group>
        </view>
      </view>
    </popup-layer>
  </view>
</template>

<script>
	import popupLayer from 'components/popup-layer/popup-layer.vue';
	import uploadImage from '@/components/upload-image/index.vue';
	export default {
		components: {
			popupLayer,
			uploadImage
		},
		data() {
			return {
				id: '',
				form: {
					reason: '',
					checksums: [],
					textInfo: ''
				},
				orderDetail: {},
				faceValue: this.$store.state.faceValue || 50,
				showRefundInfor: false,
				btnLoading: false,
				items: [{
						value: '双方协商一致',
						name: '双方协商一致'
					},
					{
						value: '商品品质于描述不符',
						name: '商品品质于描述不符'
					},
					{
						value: '行程取消',
						name: '行程取消'
					},
					{
						value: '因商家无法入园',
						name: '因商家无法入园'
					},
					{
						value: '其他原因',
						name: '其他原因'
					}
				]
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.queryData(options.id);
			}
		},
		methods: {
			selectRefund() {
				this.showRefundInfor = true;
			},
			closePop() {
				this.showRefundInfor = false;
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				this.form.reason = evt.detail.value;
				this.showRefundInfor = false;
			},
			removeList(i) {
				uni.showModal({
					title: '温馨提示',
					content: '是否删除该图片',
					confirmText: '是',
					cancelText: '否',
					success: (res) => {
						this.form.checksums.splice(i, 1);
					},
					complete: function(e) {
						console.log('uni.showModal调用结果', e)
					}
				});
			},
			addImgList(obj) {
				this.form.checksums.push(obj);
				console.log(this.form.checksums);
			},
			// 订单详情获取
			queryData(id) {
				uni.showLoading({
					title: '加载中'
				});
				this.$ajax({
					method: 'get',
					url: '/outing/mobile/order/queryById',
					data: {
						id
					}
				}).then(res => {
					this.orderDetail = res.data;
				}).finally(err => {
					uni.hideLoading();
				});
			},
			submitOrder() {
				const { reason, checksums, textInfo } = this.form;
				if (!reason) return uni.showToast({title: '必须选择退款原因'});
				// if (!checksums || !checksums.length) return uni.showToast({title: '必须上传退款信息图片'});
				const data = {
					amount: this.orderDetail.realAmount,
					couponNumber: this.orderDetail.couponNumber,
					orderNo: this.orderDetail.orderNo,
					reason,
					images: checksums,
					remark: textInfo,
				};
				this.btnLoading = true;
				this.$ajax({
					method: 'post',
					url: '/outing/mobile/order/refundOrder',
					header: 'application/json',
					data
				}).then(res => {
					this.btnLoading = false;
					uni.showToast({
						title: '退款申请成功！'
					});
					uni.redirectTo({
					    url: '/subPages/personalCenter/order/list?status='
					});
				}).catch(e => {
					this.btnLoading = false;
				});;
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .popup-content {
		background: none !important;
	}

	.container {
		min-height: 100vh;
		background: #f7f9fb;

		.order-detail {
			width: 720rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			margin: 30rpx 20rpx 20rpx 20rpx;

			.head {
				height: 72rpx;
				padding: 0 20rpx;
				border-bottom: 1rpx solid #e8e8e8;
				display: flex;
				align-items: center;

				.left {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: #555;
				}
			}

			.middle {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				.left {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.center {
					flex: 1;
					position: relative;
					margin-left: 10rpx;

					.title {
						display: flex;
						line-height: 44rpx;
						max-height: 88rpx;
						overflow: hidden;
						margin-bottom: 4rpx;
						justify-content: space-between;
					}

					.price {
						position: absolute;
						bottom: 0;
						left: 0;
					}
				}

				.right {
					width: 70rpx;
				}
			}
		}

		.refund-infor {
			background: #fff;
			margin: 0 20rpx;
			border-radius: 10rpx;

			.head {
				height: 72rpx;
				padding: 20rpx;
				border-bottom: 1px solid #e8e8e8;
			}

			.content {
				padding: 0 20rpx;

				.item {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.price {
						color: #fe7d15;
					}
				}

				.des {
					text-align: right;
					color: #fe7d15;
				}
			}
		}

		.refund-voucher {
			background: #fff;
			margin: 20rpx;
			border-radius: 10rpx;
			padding: 20rpx;

			.head {
				height: 52rpx;
			}

			&-txt {
				width: 670rpx;
				height: 312rpx;
				box-sizing: border-box;
				border: 1rpx solid #ccc;
				padding: 20rpx;
			}
		}

		.foot {
			margin: 40rpx auto;
			display: flex;
			justify-content: center;

			.btn {
				width: 610rpx;
				height: 82rpx;
				font-size: 26rpx;
				color: #fff;
				background: linear-gradient(312deg, #ffc77b 0%, #f78833 100%);
				border-radius: 41rpx;
				border: none;
			}
		}

		.refund-box {
			width: 100%;
			min-height: 100rpx;
			background: #ffffff;
			border-radius: 40upx 40upx 0 0;
			padding-bottom: 70upx;

			.title {
				text-align: center;
				padding: 40rpx 0;
			}

			.list {
				padding: 0 50rpx;

				.list-cell {
					display: flex;
					align-items: center;
					height: 70rpx;
					color: #333333;
					font-size: 28rpx;

					view {
						display: flex;
					}
				}
			}
		}
	}
</style>
